<template>
  <!-- 通知 -->
  <t-tooltip v-model:visible="state.noticeVisible" :content="$t('layout.notice.title')" placement="bottom">
    <div class="notification" @click="notificationClick">
      <t-badge :value="unreadList.length" :hidden="unreadList.length === 0" :max="10">
        <MailIcon class="notification-icon" size="16px" />
      </t-badge>
    </div>
  </t-tooltip>
</template>

<script setup lang="ts">
import { useNotificationStore } from '@store';
import { MailIcon } from 'tdesign-icons-vue-next';
import emitter from '@/utils/mitt';

const { unreadList } = useNotificationStore();

const state = reactive({
  noticeVisible: false,
})

const notificationClick = () => {
  state.noticeVisible = false;
  emitter.emit('noticeVisible', true);
}

</script>

<style scoped lang="less">
.notification {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  margin-right: 10px;

  &:hover {
    background-color: var(--td-brand-color-5);

    .notification-icon {
      color: white;
    }

  }
}
</style>
